<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .img{
            cursor: pointer;
        }
    </style>
</head>
<body>
    <!-- 
        实现目标：
            点击全屏
     -->
     <!-- <div style="text-align: center; padding-top: 100px;">
        <img src="./img/baidu.png" alt="" class="img">
     </div>

     <script>
         let img = document.getElementsByTagName('img')[0];
         console.log(img)
     </script> -->


   
     
    <div class="column_diagram">
        <div style="text-align: center; padding-top: 100px;">
            <img src="./img/baidu.png" alt="" class="img" onClick="fullScreen()">
         </div>
        <button class="column_fell_screen" onClick="fullScreen()">全屏显示</button>
        <button class="column_fell_screen1" onClick="fullExit()">退出全屏</button>
    </div>
     
    <script>
        let imgScreen = document.getElementsByTagName('img')[0];
     
        function fullScreen() {
            var element = document.documentElement; //若要全屏页面中div，var element= document.getElementById("divID");  
            imgScreen.style.height = 100;
            imgScreen.style.width = 100;
            //IE 10及以下ActiveXObject  
            if (window.ActiveXObject) {
                var WsShell = new ActiveXObject('WScript.Shell')
                WsShell.SendKeys('{F11}');
            }
            //HTML W3C 提议  
            else if (imgScreen.requestFullScreen) {
                imgScreen.requestFullScreen();
            }
            //IE11  
            else if (imgScreen.msRequestFullscreen) {
                imgScreen.msRequestFullscreen();
            }
            // Webkit (works in Safari5.1 and Chrome 15)  
            else if (imgScreen.webkitRequestFullScreen) {
                imgScreen.webkitRequestFullScreen();
            }
            // Firefox (works in nightly)  
            else if (imgScreen.mozRequestFullScreen) {
                imgScreen.mozRequestFullScreen();
            }
        }
     
        //退出全屏  
        function fullExit() {
            var element = document.documentElement; //若要全屏页面中div，var element= document.getElementById("divID");   
            //IE ActiveXObject  
            if (window.ActiveXObject) {
                var WsShell = new ActiveXObject('WScript.Shell')
                WsShell.SendKeys('{F11}');
            }
            //HTML5 W3C 提议  
            else if (imgScreen.requestFullScreen) {
                imgScreen.exitFullscreen();
            }
            //IE 11  
            else if (imgScreen.msRequestFullscreen) {
                imgScreen.msExitFullscreen();
            }
            // Webkit (works in Safari5.1 and Chrome 15)  
            else if (imgScreen.webkitRequestFullScreen) {
                imgScreen.webkitCancelFullScreen();
            }
            // Firefox (works in nightly)  
            else if (imgScreen.mozRequestFullScreen) {
                imgScreen.mozCancelFullScreen();
            }
        }
    </script>
</body>
</html>